<template>
  <div class="member-container">
    <div class="member-header">
      <h1>会员专享区</h1>
      <p>欢迎，尊贵的会员用户！</p>
    </div>

    <div class="member-content">
      <div class="benefits-section">
        <h2>会员特权</h2>
        <div class="benefits-grid">
          <div class="benefit-card">
            <div class="benefit-icon">🌟</div>
            <h3>专属内容</h3>
            <p>访问独家情感分析报告和专业建议</p>
          </div>
          
          <div class="benefit-card">
            <div class="benefit-icon">💬</div>
            <h3>优先咨询</h3>
            <p>享受专业心理咨询师的优先回复</p>
          </div>
          
          <div class="benefit-card">
            <div class="benefit-icon">📚</div>
            <h3>学习资源</h3>
            <p>免费获取情感管理课程和电子书</p>
          </div>
          
          <div class="benefit-card">
            <div class="benefit-icon">🎉</div>
            <h3>特别活动</h3>
            <p>参与会员专属线上活动和讲座</p>
          </div>
        </div>
      </div>

      <div class="member-actions">
        <h2>会员专区</h2>
        <div class="action-buttons">
          <router-link to="/questions" class="action-btn">
            情感问答专区
          </router-link>
          <router-link to="/share" class="action-btn">
            故事分享专区
          </router-link>
          <router-link to="/stories" class="action-btn">
            社区支持专区
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userStore } from '../stores/user.js'
import { useRouter } from 'vue-router'

export default {
  name: 'MemberView',
  setup() {
    const router = useRouter()
    
    // 检查用户是否为会员，如果不是则重定向到首页
    const userState = userStore.getState()
    if (!userState.isAuthenticated || !userState.currentUser.isMember) {
      router.push('/')
    }
    
    return {}
  }
}
</script>

<style scoped>
.member-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.member-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  border-radius: 15px;
  color: white;
}

.member-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.member-header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.benefits-section {
  margin-bottom: 3rem;
}

.benefits-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.benefit-card {
  background: white;
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.benefit-card:hover {
  transform: translateY(-5px);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.benefit-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #333;
}

.benefit-card p {
  color: #666;
  line-height: 1.6;
}

.member-actions h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #333;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-btn {
  background-color: #ff9a9e;
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 154, 158, 0.3);
}

.action-btn:hover {
  background-color: #f86d75;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(255, 154, 158, 0.4);
}

@media (max-width: 768px) {
  .member-container {
    padding: 1rem;
  }
  
  .member-header {
    padding: 1.5rem;
  }
  
  .member-header h1 {
    font-size: 2rem;
  }
  
  .member-header p {
    font-size: 1rem;
  }
  
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .action-btn {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
}
</style>